<template>
  <a-form
    ref="formRefLine"
    :model="formInline"
    style="display: flex; justify-content: space-between"
  >
    <a-form-item label="生产厂家名称:">
      <a-input v-model="formInline.zhuanghao" placeholder="请输入" clearable />
    </a-form-item>
    <a-form-item label="负责人:">
      <a-input v-model="formInline.name" placeholder="请输入" clearable />
    </a-form-item>
    <a-form-item label="详细地址:">
      <a-input
        v-model="formInline.xiangxidizhi"
        placeholder="请输入"
        clearable
      />
    </a-form-item>
    <a-form-item style="margin-right: 0px">
      <div style="width: 100%; display: flex; justify-content: right">
        <a-button type="primary" @click="search" style="margin-right: 20px">
          <template #icon><SearchOutlined /></template>
          搜索
        </a-button>
        <a-button @click="reset">重置</a-button>
      </div>
    </a-form-item>
  </a-form>
  <div class="btnLIst">
    <a-button
      @click="openDialog('添加', null)"
      style="margin-right: 20px"
      type="primary"
    >
      <template #icon><PlusOutlined /></template>
      添加
    </a-button>
    <div class="btnRIghtList">
      <a-button @click="delsAll" class="btnRight">批量删除</a-button>
      <a-button @click="exportFile" class="btnRight">导出</a-button>
    </div>
  </div>

  <a-modal
    v-model:open="modalVisible"
    title="删除确认"
    @ok="handleModalOk"
    @cancel="handleModalCancel"
  >
    确认要删除吗？
  </a-modal>
  <!-- <a-table :columns="columns" :dataSource="data" /> -->
  <MyTable :columns="columns" :tableData="data"></MyTable>
  <EasyAddModal @ok="ok" @cancel="cancel"  :isModalVisible="isModalVisible" :modaltitle="modaltitle" v-model:open="isModalVisible"></EasyAddModal>
</template>

<script setup>
  import { ref } from 'vue'
  import { Modal, Table, Button } from 'ant-design-vue'
  import { PlusOutlined, SearchOutlined } from '@ant-design/icons-vue'
  import { defineProps, defineEmits } from 'vue'
  import EasyAddModal from './components/EasyAddModal.vue'

  //父组件传过来的数据
  const props = defineProps({
    // isModalVisible: {
    //   typeof: Boolean,
    // },
    // modaltitle: {
    //   type: String,
    // },
    // tabledataList: [],
  })
  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
    },
  ]
  const formInline = ref({})

  const data = ref([
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
    },
    // ...更多数据
  ])
  const isModalVisibleBool = ref(true)
  const modalVisible = ref(false)
  const isModalVisible = ref(false)
  const modaltitle = ref('')
  //添加用户
  const openDialog = (title, record) => {
    modaltitle.value = title
    isModalVisible.value = true
    // console.log(title, record,'sss')
  }
  //批量删除
  const delsAll = () => {
    modalVisible.value = true
  }
  //取消弹框的按钮
  const handleModalCancel = () => {
    modalVisible.value = false
  }
  //删除的逻辑
  const handleModalOk = () => {
    // 删除列逻辑走接口
    // ...
    modalVisible.value = false
  }
  //导出
  const exportFile = () => {
    let a = document.createElement('a')
    a.href = '后端接口'
    a.download = '文件名'
    a.style.display = 'none'
    document.body.appendChild(a)
    a.click()
    a.remove()
  }
  //-------------------------子组件调用父组件的方法---------------------------
  //关闭弹框
  const cancel=()=>{
    isModalVisible.value = false
  }
  //弹框确定
  const ok=(res)=>{
    console.log(res,'-----------------')
    isModalVisible.value = false
  }
</script>
<style scoped lang="less">
  .btnLIst {
    position: relative;
    margin-bottom: 10px;
  }
  .btnRIghtList {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999;
    .btnRight {
      margin-left: 20px;
    }
  }
</style>
